<template>
	<view class="zxc_centent">
		<u-swiper
		          :list="banner"
				   radius="0"
				   height="400"
		  ></u-swiper>
		  
		  <view class="big_box">
			  <view class="tp">
				  <view class="tp_left">
					  娜可露露
				  </view>
			<!-- 	  <navigator hover-class="none" url="/pagesB/jishi/store" class="tp_right">
				  		<image src="../../static/images/renzheng.png" mode="widthFix" class="renzhengz_img"></image>
						签约商家
				  </navigator> -->
			  </view>
			  <view class="asd">
				  简介：本人性格开朗，喜欢交流，从事按摩行业五年，手法娴 熟，生命中每一次相遇都是缘分，期待您的预约。
			  </view>
			  <view class="info_bt">
			  				  <image src="../../static/images/cai5.png" mode="widthFix" class="cai_img"></image>
			  </view>
			  
			  <view class="label">用户评价</view>
			  
			  <view class="ping_list" v-for="(item,index) in list">
				  <view class="ping_list_tp">
					  <view class="ping_list_tp_left">
						  <view class="name">{{item.name}}</view>
						  <view class="rate">
							  <u-rate :count="5" v-model="item.rate" readonly></u-rate>
						  </view>
					  </view>
					   <view class="ping_list_tp_left">{{item.time}}</view>
				  </view>
				  <view class="ping_list_bt">
				  		{{item.text}}  
				  </view>
			  </view>
			  
		  </view>
		  
		  <view class="fixbt" v-if="jishiuserType ==1">
			  <view class="fixbt_left">
				  <view class="ijc" v-if="status ==0" @click="lick (0)">
					    <image src='../../static/images/xin.png' mode="widthFix" class="xin_img" ></image>
						收藏
				  </view>
				<view class="ijc" v-if="status ==1" @click="lick (1)">
					 <image src='../../static/images/xin_active.png' mode="widthFix" class="xin_img"></image>
						取消收藏
				</view>
			  </view>
			  <view class="fixbt_right" @click="open2">
			  		立即预约		  
			  </view>
		  </view>
		  
		  <!-- 选择项目 -->
		  <u-popup :show="show" @close="close" :round="10">
		              <view class="shop_list">
		                   <image src="../../static/images/cai5.png" mode="widthFix" class="cai_img"></image>
						   
						  <u-tabs :list="project_tabs" keyName="typeName" @click="change_project_tabs" :current="project_current" :scrollable="true" lineColor="#07c160" style="margin-bottom:20upx"></u-tabs>
						  	   <view class="list" style="height: 50vh;">
						  		   <!-- 数据为空 -->
						  		     <u-empty style="margin-top:100upx;" v-if="projectlist.length<=0"></u-empty>
						  	   	<view class="list_sm" v-for="(item,index) in projectlist" v-if="projectlist.length>0">
						  			<image :src="item.itemImage ? item.itemImage : '../../static/images/anmo.png'" class="shop_img"></image>
						  	   		<view class="list_right">
						  	   			<view class="list_tit">{{item.artificerItemName}}</view>
						  	   			<view class="list_text">
						  					<span style="margin-right:10upx">首钟时长:{{item.firstClockDuration}}分钟</span>
						  					<span style="margin-right:10upx">首钟价格:￥{{item.firstClockPrice}}</span>
						  					<span style="margin-right:10upx">首钟会员价:￥{{item.firstClockMemberPrice}}</span>
						  				<span style="margin-right:10upx">加钟价格:￥{{item.addClockPrice}}</span>
						  				<span style="margin-right:10upx">加钟时长:{{item.addClockDuration}}分钟</span>
						  				<span style="margin-right:10upx">加钟会员价:￥{{item.addClockMemberPrice}}</span>
						  				</view>
						  	   			<view class="list_ikd">
						  	 <!--  				<view class="" style="display: flex;align-items: center;">数量：<u-number-box v-model="item.num"  :min="0" button-size="30"></u-number-box></view> -->
						  	 <view  @click="sure_project(item)" style="background-color: #07c160;padding:10upx;border-radius: 100upx;color:#fff;width: 60%;text-align: center;">
						  	 	选择
						  	 </view>
						  	   				
						  	   			</view>
						  	   		</view>
						  	   	</view>
						  	   </view>
						   </view>
						   <!-- end -->
					
						   
		  		</u-popup>
				
				
				<!-- pop 2 时间 -->
					<u-datetime-picker
				                              :show="show2"
											  :closeOnClickOverlay="true"
											  @close="close2"
											  @cancel="close2"
											  @confirm="confirmtime"
											  :formatter="formatter"
				                               v-model="selecttime"
				                               mode="datetime"
				      ></u-datetime-picker>
		  
	</view>
</template>

<script>
	import SOtime from '@/uni_modules/fl-SOtime/SOtime.js'
	export default {
		data (){
			return {
				show:false,
				show2:false,
				selecttime: Number(new Date()),
				suretime:'',
				status:0,  //0未收藏 1已收藏
				project_tabs: [  //技师类项目分类
				],
				project_tabs_classId:'',  //选择技师类项目分类id
				project_current:0,
				projectlist:[  //技师类项目列表
							],
				artificerItem:{},  //选择的技师类项目
				banner: [{
				                   url: 'http://192.168.1.4:9000/hotel/2023/07/19/ffe9903d46a04cae9a90fd9f13e53fe7.png'
				               },{
				                   url: 'http://192.168.1.4:9000/hotel/2023/07/19/ffe9903d46a04cae9a90fd9f13e53fe7.png'
				       }],
				list:[
					{
						name:'一个大松蜀',
						rate:4,
						time:'2023-12-14',
						text:'按得很舒服按得很舒服'
					},
					{
						name:'一个大松蜀',
						rate:5,
						time:'2023-12-14',
						text:'按得很舒服按得很舒服'
					},
					{
						name:'一个大松蜀',
						rate:4,
						time:'2023-12-14',
						text:'按得很舒服按得很舒服'
					}
				],
				jishiuserType:'',  //技师身份  0在店技师 1兼职技师
			}
		},
		onLoad (opation){
			console.log(opation)
			this.jishiuserType=opation.jishiuserType
		},
		methods:{
			getprojectList (){  //获取这个兼职技师类项目
				
				var obj={
				      pageSize:500,   //每页的条数
				      pageNum:1  ,//页码
					  type:0//0技师类 1商品类 2功能类
				           }
				        
				        uni.showLoading({
				         title:'请求中'
				        })
				        
				           this.$post(this.$api.itemTypeList, obj,   //获取分类列表
				            (res) => {
				             if (res.code == 200) {
				        uni.hideLoading()
				       this.project_tabs=res.data
				
					   var objj={
					         pageSize:300,   //每页的条数
					         pageNum:1,//页码
							 typeId:this.project_tabs_classId ? this.project_tabs_classId :res.data[0].id  //默认查第一条分类数据
					              }
					           
					   
					           
					              this.$post(this.$api.artificerItemList, objj,   //获取列表
					               (res) => {
					                if (res.code == 200) {
					          this.projectlist=res.data
					                }
					             else{
					              uni.showToast({
					               title: res.msg ? res.msg : '网络错误',
					               icon: 'none'
					              })
					             }
					               },
					               (res) => {
					                uni.showToast({
					                 title: res.msg ? res.msg : '网络错误',
					                 icon: 'none'
					                })
					               },1,0)
					   
				             }
				          else{
				           uni.showToast({
				            title: res.msg ? res.msg : '网络错误',
				            icon: 'none'
				           })
				          }
				            },
				            (res) => {
				             uni.showToast({
				              title: res.msg ? res.msg : '网络错误',
				              icon: 'none'
				             })
				            },1,0)
							
			
			},
			change_project_tabs (e){
				console.log(e)
				this.project_current=e.index
				this.project_tabs_classId=e.id
				this.getprojectList();
			},
			sure_project (item){  //选择技师项目
				console.log(item)
				this.project=item.artificerItemName;
				this.artificerItem.itemId=item.id;
				this.artificerItem.num=1;
				this.close()
				this.submit()
			},
			lick (e){
				if(e ==0){
					this.status=1;
				}
				if(e ==1){
					this.status=0;
				}
			},
			open (){  //打开项目弹窗
				this.show=true;
				this.getprojectList()
			},
			close (){
				this.show=false;
			},
			open2() {   //选择时间弹窗
			    this.show2 = true;
			  },
			  close2() {
			    this.show2 = false;
			  },
			  confirmtime (e){  //选择时间
			  	var Timestamp = e.value;
			  	this.suretime=SOtime.timestampToDate(Timestamp)
			  	 this.show2 = false;
				 this.open()
			  	 console.log(this.suretime)
			  },
			       formatter(type, value) {
			                  if (type === 'year') {
			                      return `${value}年`
			                  }
			                  if (type === 'month') {
			                      return `${value}月`
			                  }
			                  if (type === 'day') {
			                      return `${value}日`
			                  }
			                  return value
			              },
			valChange(e) {
							console.log('当前值为: ' + e.value)
						},
			submit (){
				//兼职技师 jishiuserType 1
				uni.navigateTo({
					url:'/pagesA/detail/detail_order?jishiuserType=1'
				})
			}
		}
	}
</script>

<style>
	.zxc_centent{
		padding:0 0 150upx 0;
	}
	.big_box{
		width:93%;
		margin:0 auto;
	}
	.tp{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:30upx 0;
	}
	.tp_left{
		font-weight: 700;
		font-size: 33upx;
	}
	.tp_right{
		display: flex;
		align-items: center;
		font-weight: 700;
		font-size:30upx;
	}
	.renzhengz_img{
		width: 30upx;
		margin-right: 10upx;
	}
	.info_bt{
		margin-top:30upx;
	}
	.cai_img{
		width: 100%;
	}
	.asd{
		font-size:28upx;
	}
	.label{
		text-align: center;
		margin:30upx 0;
		font-weight: 700;
	}
	.ping_list{
		background-color: #fff;
		border-radius: 10upx;
		padding:30upx;
		font-size:28upx;
		color:#666;
		margin-bottom:20upx;
	}
	.ping_list_tp{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ping_list_tp_left{
		display: flex;
		align-items: center;
	}
	.name{
		max-width: 200upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.rate{
		margin-left:20upx;
	}
	.ping_list_bt{
		font-size:30upx;
		color:#000;
		margin-top:20upx;
	}
	.xin_img{
		width: 40upx;
		margin-right:10upx;
	}
	.fixbt{
		width:90%;
		padding:0 5%;
		background-color: #fff;
		height:100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom:0;
		left:0;
		z-index: 99;
		border-top:2upx solid #ccc;
	}
	.ijc{
		display: flex;
		align-items: center;
		font-size:28upx;
	}
	.fixbt_right{
		    width: 500upx;
		    text-align: center;
		    background-color: #07c160;
		    color: #fff;
		    border-radius: 100upx;
		    font-size: 28upx;
		    white-space: nowrap;
		    padding: 20upx 0;
	}
	.shop_list{
		width:100vw;
	}
	.list{
		width:90%;
		height:520upx;
		overflow-y: auto;
		margin:0 auto ;
		background-color: #fff;
		border-radius: 10upx;
		margin-top:-20upx;
		padding:20upx 5% 0 5%;
		position: relative;
	}
	.list_sm{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom:30upx;
		padding-bottom:20upx;
		border-bottom:2upx solid #ededed;
	}
	.shop_img{
		width:200upx;
		height:200upx;
		object-fit: cover;
		border-radius: 10upx;
	}
	.list_right{
		width:65%;
	}
	.list_tit{
		font-weight: 700;
		font-size:28upx;
	}
	.list_text{
		color:#999;
		margin-top:20upx;
		font-size:25upx;
	}
	.list_ikd{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top:20upx;
	}
	.money{
		font-weight: 700;
		color:#ff6c00;
	}
	.shop_bt_view{
		margin:30upx 0;
		width:100%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom:0;
		left:0;
	}
	.shop_bt{
		width:90%;
		height:90upx;
		line-height: 90upx;
		border-radius: 100upx;
		background-color: #333;
		color:#fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.shop_bt_left{
		width:70%;
		height:100%;
		font-size:35upx;
		text-indent: 30upx;
	}
	.shop_bt_right{
		width:30%;
		height:100%;
		background-color: #07c160;
		border-radius:0 100upx 100upx 0;
		text-align: center;
	}
</style>